<template>

  <el-row>
    <vue-waterfall-easy :maxCols="3" :gap="10" :height="1000" :imgsArr="imgsArr"
                        @scrollReachBottom="getData"></vue-waterfall-easy>
  </el-row>
</template>

<script>
  import vueWaterfallEasy from "vue-waterfall-easy";
  import { getMeizitu  } from '../../api/httpApi'

  export default {
    name: "meizitu",
    components:{
      vueWaterfallEasy
    },
    data() {
      return {
        currentDate: new Date(),
        group:0,
        imgsArr:[],
      };
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        var data = {page: this.group};
        getMeizitu(data).then((res)=>{
          var rt = res.data;
          if (rt.code === 0){
            var data = rt.data.meizituList;
            var imgsArr = [];
            data.forEach(function (item) {
              imgsArr.push({"src":item.oldURL});
            });
            console.log(imgsArr);
            this.imgsArr = this.imgsArr.concat(imgsArr);
            console.log(this.imgsArr);
            this.group++
          }
        })
      },
    },
  }
</script>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .vue-waterfall-easy-container{
    width: 100%;
    height: 800px;
  }

  .el-card{
    margin-bottom: 20px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>

